<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>姓名案例-计算属性简写</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            简写不使用配置项的写法（xxx:{}），而是将写法函数化
               如：属性名(){} 或 属性名:function(){}
            如果计算属性只是提供数据给用户进行读，只使用getter而不去修改数据，就可以使用简写的形式；
        -->
        <div id="root">
            姓：<input type="text" v-model="firstName"> <br/>
            名：<input type="text" v-model="lastName"> <br/>
            全名：<span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            const vm = new Vue({
                el:"#root",
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                //完整写法
                /* computed:{
                    fullName:{
                        get(){
                            console.log('getter被调用了');
                            return this.firstName + '—' + this.lastName;
                        },
                        set(value){
                            console.log('setter被调用了',value);
                            const arr = value.split('—'); //按照指定字符将字符串拆分成一个数组
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                        }
                    }
                } */
                //简写
                computed:{
                    /*
                        简写不使用配置项的写法（xxx:{}），而是将写法函数化
                            如 属性名:function(){} 或 属性名(){}
                        如果计算属性只是提供数据给用户进行读，只使用getter而不去修改数据，就可以使用简写的形式；
                    */
                    fullName(){
                        console.log('getter被调用了');
                        return this.firstName + '—' + this.lastName;
                    }
                }
            })
        </script>
        
    </body>
</html>